/**
 * @desc: 利用video标签替换quill-editor中video生成的iframe标签。
 * @author: zcq
 * @date： 2024-6-20
 * @config 通过value的数据传递，在实现实例时，配置video的上下左右位置以及宽高
 * */
import Quill from 'quill';
// eslint-disable-next-line no-unused-vars
import * as url from 'url';

// 源码中是import直接倒入，这里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed');
const Link = Quill.import('formats/link');

const ATTRIBUTES = ['height', 'width'];

class Video extends BlockEmbed {
  static create(value) {
    const node = super.create(value);
    // 添加video标签所需的属性
    node.setAttribute('controls', 'controls')
    node.setAttribute('controlsList', 'nofullscreen') // 控制删除
    node.setAttribute('preload', 'auto') // auto - 当页面加载后载入整个视频  meta - 当页面加载后只载入元数据  none - 当页面加载后不载入视频
    node.setAttribute('type', 'video/mp4')
    // node.setAttribute('style', 'object-fit:fill;width: 100%;')
    // node.setAttribute('src', this.sanitize(value))
    // eslint-disable-next-line no-prototype-builtins
    node.setAttribute('src', value.hasOwnProperty('url') ? value.url : value) // 回显
    node.setAttribute('webkit-playsinline', true)
    node.setAttribute('playsinline', true)
    node.setAttribute('x5-playsinline', true)
    node.setAttribute('width', value.width);
    node.setAttribute('height', value.height);
    return node;
  }

  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }

  static sanitize(url) {
    return Link.sanitize(url);
  }

  static value(domNode) {
    // 设置值包含宽高，为了达到自定义效果
    // 宽高为空的话，就是按100%算
    return {
      url: domNode.getAttribute('src'),
      controls: domNode.getAttribute('controls'),
      width: domNode.getAttribute('width'),
      height: domNode.getAttribute('height')
    };
  }

  format(name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }

  html() {
    const { video } = this.value();
    return `<a href="${video}">${video}</a>`;
  }
}
Video.blotName = 'video';
Video.className = 'ql-video' // 可添加样式，看主要需要
Video.tagName = 'video'; // 用video标签替换iframe

export default Video;
